<template>
  <div class="modal-overlay">
    <div class="modal">
      <h2>编辑菜单</h2>
      
      <div class="add-form">
        <input 
          v-model="newDish"
          placeholder="输入菜品名称"
          @keyup.enter="addDish"
        >
        <button @click="addDish">添加</button>
      </div>

      <div class="dish-list">
        <div v-for="dish in dishes" :key="dish" class="dish-item">
          <span>{{ dish }}</span>
          <button @click="removeDish(dish)" class="delete-btn">×</button>
        </div>
      </div>

      <div class="modal-footer">
        <button @click="$emit('close')">关闭</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps(['dishes'])
const emit = defineEmits(['close', 'update'])

const newDish = ref('')

const addDish = () => {
  if (!newDish.value) return
  
  const updatedDishes = [...props.dishes]
  if (!updatedDishes.includes(newDish.value)) {
    updatedDishes.push(newDish.value)
    emit('update', updatedDishes)
  }
  newDish.value = ''
}

const removeDish = (dish) => {
  const updatedDishes = props.dishes.filter(d => d !== dish)
  emit('update', updatedDishes)
}
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal {
  background: white;
  padding: 20px;
  border-radius: 8px;
  width: 80%;
  max-width: 500px;
  max-height: 80vh;
  overflow-y: auto;
}

.add-form {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.dish-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.dish-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  background: #f5f5f5;
  border-radius: 4px;
}

.delete-btn {
  color: #ff4444;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2em;
}
</style> 